<template>
  <div>
    <!-- Header -->
    <div class="header bg-gradient-success py-7 py-lg-8 pt-lg-9">
      <b-container>
        <div class="header-body text-center mb-7">
          <b-row class="justify-content-center">
            <b-col xl="5" lg="6" md="8" class="px-5">
              <h1 class="text-white">欢迎!</h1>
              <p class="text-lead text-white">
                使用乐游校园来感受全新的学习体验！
              </p>
            </b-col>
          </b-row>
        </div>
      </b-container>
      <div class="separator separator-bottom separator-skew zindex-100">
        <svg
          x="0"
          y="0"
          viewBox="0 0 2560 100"
          preserveAspectRatio="none"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <polygon
            class="fill-default"
            points="2560 0 2560 100 0 100"
          ></polygon>
        </svg>
      </div>
    </div>
    <!-- Page content -->
    <b-container class="mt--8 pb-5">
      <b-row class="justify-content-center">
        <b-col lg="5" md="7">
          <b-card no-body class="bg-secondary border-0 mb-0">
            <b-card-body class="px-lg-5 py-lg-5">
              <div class="text-center text-muted mb-4">
                <small style="font-size: 18px">学生登录</small>
              </div>
              <validation-observer
                v-slot="{ handleSubmit }"
                ref="formValidator"
              >
                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
                  <el-input
                    prefix-icon="ni ni-circle-08"
                    placeholder="学号"
                    autofocus="true"
                    @change="checkUid"
                    v-model="number"
                  >
                  </el-input>

                  <el-input
                    class="myPassword"
                    prefix-icon="ni ni-lock-circle-open"
                    placeholder="密码"
                    type="password"
                    v-model="password"
                  >
                  </el-input>

                  <b-form-checkbox>记住账户</b-form-checkbox>
                  <div class="text-center">
                    <base-button
                      type="primary"
                      native-type="submit"
                      class="myButton my-4"
                      >登录</base-button
                    >
                  </div>
                </b-form>
                <div class="text-muted text-center mb-3">
                  <small>第三方登录</small>
                </div>
                <div class="btn-wrapper text-center">
                  <a
                    @click="thirdPartlogin('facebook')"
                    class="btn btn-neutral btn-icon"
                  >
                    <span class="btn-inner--icon"
                      ><img src="img/icons/common/facebook.svg"
                    /></span>
                    <span class="btn-inner--text">Facebook</span>
                  </a>
                  <a href="#" class="btn btn-neutral btn-icon">
                    <span class="btn-inner--icon"
                      ><img src="img/icons/common/linkedin.svg"
                    /></span>
                    <span class="btn-inner--text">Linkedin</span>
                  </a>
                </div>
              </validation-observer>
            </b-card-body>
          </b-card>
          <b-row class="mt-3">
            <b-col cols="6">
              <router-link to="/dashboard" class="text-light"
                ><small>密码找回</small></router-link
              >
            </b-col>
            <!-- <b-col cols="6" class="text-right">
              <router-link to="/register" class="text-light"><small>Create new account</small></router-link>
            </b-col> -->
          </b-row>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
import axios from "axios";
import hello from "hellojs/dist/hello.all.js";
export default {
  data() {
    return {
      number: "",
      password: "",
      errorIdText: "",
      errorPwdText: "",
    };
  },
  mounted() {
    this.thirdPartApiInit();
  },
  methods: {
    onSubmit() {
      // this will be called only after form is valid. You can do api call here to login
    },
    checkUid() {
      let rule = /^\d{9}$/;
      let text = "";
      if (!rule.test(this.number)) {
        text = "学号输入有误";
      }
      this.errorIdText = text;
      this.errorPwdText = text;
    },
    thirdPartApiInit() {
      hello.init(
        {
          facebook: "393986261841574",
          //facebook的应用ID
          google:
            "47870832533-b3cn8ppnc5otejjt6l9khnagt8g99uuu.apps.googleusercontent.com",
        },
        {
          scope: "email",
          redirect_uri: "http://localhost:8080/login",
          //回传的处理页面
        }
      );
    },
    thirdPartlogin(app) {
      let that = this;
      hello(app)
        .login()
        .then(
          function (res) {
            //'facebook'登录，该字段可以换成你想要某个第三方应用登录的字段
            //res.authResponse.access_token即为后台所需要的token
            //res.authResponse.id_token   google登录所需要的token
          },
          function (e) {
            // console.log("Signin error: " + e.error.message);
            //一般出错均为开发者平台没有配好设置
          }
        );
      // Listen to signin requests
      hello.on("auth.login", function (r) {
        // Get Profile
        hello(r.network)
          .api("/me")
          .then(function (response) {
            console.log(response);
            console.log("当前的登录应用是：" + app);
            console.log("用户名：" + response.name);
            console.log("用户编号" + response.id);
            that.thirdTokenLogin(response.id, response.name, app);
          });
      });
    },
    thirdTokenLogin(token, name, type) {
      console.log("working");
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
        url: "/api/thirdPart/login", //后端请求的路径
        method: "post",
        data: {
          token,
          type,
          studentNumber: "0",
        },
      }).then((response) => {
        if (response.status == 0) {
          console.log(response.response);
        } else {
          this.thirdTokenRegister(token, type);
        }
      });
    },
    thirdTokenRegister(token, type) {
      console.log("working");
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
        url: "/api/thirdPart/login", //后端请求的路径
        method: "post",
        data: {
          token,
          type,
          studentNumber: "180809430",
        },
      }).then((response) => {
        console.log(response.token);
      });
    },
    login() {
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
        url: "/api/login", //后端请求的路径
        method: "post",
        data: {
          number: this.number,
          password: this.password,
        },
      }).then((response) => {
        if (
          (response.token != "") |
          (response.token != undefined) |
          (response.token != null)
        ) {
          this.$router.push("/home");
          sessionStorage.setItem("systemToken", response.token);
        }
      });
    },
  },
};
</script>
<style scoped>
.warning {
  margin-top: 3px;
  font-size: 12px;
  color: #fb6868;
  height: 25px;
}
.myButton {
  width: 120px;
}
</style>
</style>
